<template>
  <div style="background-color: #eee; height: 100%">
    <!-- 头像 拉起本地相册 -->
    <van-cell size="large" title="头像">
      <template #right-icon>
        <!-- <van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" /> -->
        <img style="width: 20px; height: 20px" src="../../assets/img/myProfile/logo2.png" alt="" />
      </template>
    </van-cell>
    <!--用户名 不可以修改 -->
    <van-cell size="large" title="用户名" is-link :value="detailData.loginName"></van-cell>
    <!-- 昵称 跳转新页面编辑 -->
    <van-cell size="large" title="昵称" is-link :value="detailData.niceName" @click="goToEdit('普通昵称')"></van-cell>
    <!-- 性别 本地写死上拉框选择 -->
    <van-cell size="large" title="性别" is-link :value="detailData.sex" @click="sexShow = true"></van-cell>
    <!-- 生日 本地上拉框 -->
    <van-cell
      size="large"
      title="生日"
      is-link
      :value="detailData.userBirthday | dateFormat('YYYY-MM-DD')"
      @click="birDayShow = true"
    ></van-cell>
    <!-- 真实姓名 跳转编辑 -->
    <van-cell
      size="large"
      title="真实姓名"
      is-link
      :value="detailData && detailData.name"
      @click="goToEdit('普通真实姓名')"
    ></van-cell>
    <!-- 身份证 跳转编辑-->
    <van-cell
      size="large"
      title="身份证号"
      is-link
      :value="detailData.idCardNo"
      @click="goToEdit('普通身份证号')"
    ></van-cell>
    <!-- E-mail 跳转编辑 -->
    <van-cell
      size="large"
      title="E-mail"
      is-link
      :value="detailData.contactEmail"
      @click="goToEdit('普通邮箱')"
    ></van-cell>
    <!-- 地区 下拉本地选择 -->
    <van-cell
      ref="addressRef"
      size="large"
      title="所属地区"
      is-link
      :value="pro + city + county"
      @click="addressShow = true"
    ></van-cell>
    <!-- 地区 下拉本地选择 -->
    <van-cell
      ref="addressRef"
      size="large"
      title="专业级别"
      is-link
      :value="detailData.extraField1Name"
      @click="showLevel = true"
    ></van-cell>
    <!-- 性别 下拉选择 -->
    <van-popup v-model="sexShow" position="bottom">
      <van-picker title="性别" show-toolbar :columns="['男', '女']" @confirm="sexConfirm" @cancel="sexShow = false" />
    </van-popup>
    <!-- 生日 下拉选择 -->
    <van-popup v-model="birDayShow" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        @confirm="birdayConfirm"
        @cancel="birDayShow = false"
      />
    </van-popup>
    <!-- 地址选择器 -->
    <van-popup v-model="addressShow" position="bottom">
      <van-area title="选择地区" :area-list="areaList" @confirm="areaConfirm" @cancel="addressShow = false" />
    </van-popup>
    <!-- 专业级别 选择 -->
    <van-popup v-model="showLevel" position="bottom">
      <van-picker
        title="选择专业级别"
        show-toolbar
        :columns="levelList"
        value-key="name"
        @confirm="levelConfim"
        @cancel="showLevel = false"
      />
    </van-popup>
  </div>
</template>

<script>
import { Cell, CellGroup, Icon, Popup, Picker, DatetimePicker, Area } from 'vant'
import { getValue, setValue, setObject, clear } from '@/utils/auth'
import { postHandle, getHandle } from '@/api'
import dayjs from 'dayjs'
export default {
  name: '',
  data() {
    return {
      minDate: new Date(1922, 1, 1),
      levelList: [
        { name: '事业人员', value: 0 },
        { name: '职业农民', value: 1 },
        { name: '羊博士', value: 2 },
        { name: '羊硕士', value: 3 }
      ],
      showLevel: false,
      updataData: {},
      detailData: {},
      sexShow: false,
      birDayShow: false,
      currentDate: new Date(),
      addressShow: false,
      // address: "",
      areaList: {
        province_list: {
          110000: '北京市',
          120000: '天津市'
        },
        city_list: {
          110100: '北京市',
          120100: '天津市'
        },
        county_list: {
          110101: '东城区',
          110102: '西城区'
        }
      }
    }
  },
  components: {
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Icon.name]: Icon,
    [Popup.name]: Popup,
    [Picker.name]: Picker,
    [DatetimePicker.name]: DatetimePicker,
    [Area.name]: Area
  },
  computed: {
    pro() {
      const a = (this.detailData && this.detailData.province && this.detailData.province.name) || ''
      if (a) {
        return a + '-'
      }
      return ''
    },
    city() {
      const a = (this.detailData && this.detailData.city && this.detailData.city.name) || ''
      if (a) {
        return a + '-'
      }
      return ''
    },
    county() {
      return (this.detailData && this.detailData.county && this.detailData.county.name) || ''
    }
  },
  mounted() {
    // this.address = this.detailData.province.name + '-' + this.detailData.city.name + '-' + this.detailData.county.name
  },
  created() {
    this.getCommonData()
    this.getSSQData()
    this.$bridge.register('refresh', data => {
      this.getCommonData()
      this.getSSQData()
    })
  },
  methods: {
    // 请求省市区级联数据
    getSSQData() {
      getHandle('/agri/api/common/regionManage/query4Vant').then(res => {
        this.areaList = res.data
      })
    },
    // 修改接口 普通
    updateInfoPT() {
      postHandle('/agri/api/common/tenant/update4Person', {
        ...this.updataData,
        id: getValue('loginUserId')
      }).then(res => {
        this.getCommonData()
      })
    },
    // 跳转编辑
    goToEdit(flag) {
      // 缓存本地数据
      setValue('expert-obj', JSON.stringify(this.detailData))
      // 缓存标志位 标明从哪里跳入编辑页, 用来跳转之后回显
      setValue('expert-flag', flag)
      this.$bridge.call('myProfile_edit')
    },
    // 请求详情接口
    getCommonData() {
      getHandle(`/agri/api/common/tenant/queryDetail4Person/${getValue('loginUserId')}`).then(res => {
        this.detailData = res.data
        if (this.detailData.sex === 'MAN') {
          this.detailData.sex = '男'
        } else {
          this.detailData.sex = '女'
        }

        this.detailData.extraField1Name = this.levelList.find(ele => ele.value == res.data.extraField1).name
      })
    },
    // 性别 确认
    sexConfirm(val) {
      console.log(val)
      this.detailData.sex = val
      this.sexShow = false

      this.updataData = {}
      if (val === '男') {
        this.updataData.sex = 'MAN'
      } else {
        this.updataData.sex = 'WOMEN'
      }
      this.updateInfoPT()
    },
    // 生日 确认
    birdayConfirm(val) {
      this.detailData.userBirthday = dayjs(val).format('YYYY-MM-DD')
      this.birDayShow = false
      // 调一次修改接口
      // 修改成功再调一次列表接口
      this.updataData = {}
      this.updataData.userBirthday = this.detailData.userBirthday
      this.updateInfoPT()
    },
    // 省市区确定
    areaConfirm(val) {
      // 用来选择回显
      const provinceName = val[0].name
      const cityName = val[1].name
      const countyName = val[2].name
      this.$refs.addressRef.value = provinceName + cityName + countyName
      this.addressShow = false
      // 调一次修改接口
      // 修改成功再调一次列表接口
      this.updataData = {}
      this.updataData.provinceCode = val[0].code
      this.updataData.cityCode = val[1].code
      this.updataData.countyCode = val[2].code
      this.updateInfoPT()
    },
    // 专业级别 选择
    levelConfim(e) {
      this.updataData = {}
      this.updataData.extraField1 = e.value
      this.showLevel = false
      this.updateInfoPT()
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
